<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签管理</title>
    <link href="./2.12.1/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">标签管理</div>
        <div class="layui-card-body">
            <!-- 添加标签表单 -->
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">标签名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tagName" placeholder="请输入标签名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="add-tag-btn">添加标签</button>
                    </div>
                </div>
            </form>
            
            <!-- 标签列表 -->
            <table class="layui-table" id="tag-table">
                <colgroup>
                    <col width="80">
                    <col>
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>标签名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tag-tbody">
                    <!-- 标签数据将通过JS动态生成 -->
                </tbody>
            </table>
        </div>
    </div>

    <script src="./2.12.1/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            
            // 加载标签列表
            function loadTags() {
                var tags = JSON.parse(localStorage.getItem('tags') || '[]');
                var html = '';
                tags.forEach(function(tag) {
                    html += '<tr>' +
                        '<td>' + tag.id + '</td>' +
                        '<td>' + tag.name + '</td>' +
                        '<td>' +
                        '<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="deleteTag(' + tag.id + ')">删除</button>' +
                        '</td>' +
                        '</tr>';
                });
                document.getElementById('tag-tbody').innerHTML = html;
            }
            
            // 初始化加载标签
            loadTags();
            
            // 添加标签按钮点击事件
            document.getElementById('add-tag-btn').addEventListener('click', function(){
                var tagName = document.querySelector('input[name="tagName"]').value.trim();
                if (!tagName) {
                    layer.msg('请输入标签名称');
                    return;
                }
                
                var tags = JSON.parse(localStorage.getItem('tags') || '[]');
                
                // 检查标签是否已存在
                var exists = tags.some(function(tag) {
                    return tag.name === tagName;
                });
                
                if (exists) {
                    layer.msg('标签已存在');
                    return;
                }
                
                // 生成新ID
                var newId = tags.length > 0 ? Math.max(...tags.map(t => t.id)) + 1 : 1;
                
                // 添加新标签
                tags.push({
                    id: newId,
                    name: tagName
                });
                
                localStorage.setItem('tags', JSON.stringify(tags));
                loadTags();
                document.querySelector('input[name="tagName"]').value = '';
                layer.msg('标签添加成功');
            });
        });
        
        // 删除标签函数
        function deleteTag(id) {
            layui.use('layer', function(){
                var layer = layui.layer;
                
                layer.confirm('确定删除这个标签吗？', function(index){
                    var tags = JSON.parse(localStorage.getItem('tags') || '[]');
                    var filteredTags = tags.filter(function(tag) {
                        return tag.id !== id;
                    });
                    
                    // 同时更新文章中的标签引用
                    var articles = JSON.parse(localStorage.getItem('articles') || '[]');
                    articles.forEach(function(article) {
                        article.tags = article.tags.filter(function(tagId) {
                            return tagId !== id;
                        });
                    });
                    
                    localStorage.setItem('tags', JSON.stringify(filteredTags));
                    localStorage.setItem('articles', JSON.stringify(articles));
                    
                    // 重新加载标签列表
                    document.getElementById('tag-tbody').innerHTML = '';
                    var html = '';
                    filteredTags.forEach(function(tag) {
                        html += '<tr>' +
                            '<td>' + tag.id + '</td>' +
                            '<td>' + tag.name + '</td>' +
                            '<td>' +
                            '<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="deleteTag(' + tag.id + ')">删除</button>' +
                            '</td>' +
                            '</tr>';
                    });
                    document.getElementById('tag-tbody').innerHTML = html;
                    
                    layer.close(index);
                    layer.msg('标签删除成功');
                });
            });
        }
    </script>
</body>
</html>